<template>
  <div class="dataset-detail">
    <div class="header">
      <div class="header-content-box">
        <div class="header-left">
          <div class="title">{{curDataSet.name}}</div>
          <div class="desc">{{curDataSet.profile}}</div>
        </div>
        <div class="header-right">
          <div class="dataset-focus-container action" >
            <span class="dataset-open" @click="openDataSet" v-if="curDataSet.type === 0 && curDataSet.userId === userInfo.userId"><div class="icon-open"></div>公开该数据集</span>
            <span class="dataset-opened" v-if="curDataSet.type === 1 && curDataSet.userId === userInfo.userId"><i class="icon-open"></i><span>数据集已公开</span></span>
            <span class="dataset-focus" v-if="curDataSet.userId !== userInfo.userId">
              <span class="focus-text" :class="{'focus-text-active': !isFocus}" @click="toggleFocus">
                <i :class="{'icon-focus': isFocus, 'icon-focus-no': !isFocus}"></i>
                {{ isFocus ? '已关注' : '关注' }}
              </span>
              <span class="focus-number">{{ focusNumber }}</span>
            </span>
          </div>
        </div>
      </div>
      <ul class="nav-list">
        <li class="main-nav-list nav-left clearfix">
          <ul class="main-nav-list-container">
            <li class="nav-item link-item" :class="{'active': activeTab === 1}" @click="toggleActive(1)">
              <i class="icon icon-structure"></i>
              结构
              </li>
            <li class="nav-item link-item" :class="{'active': activeTab === 2}" @click="toggleActive(2)">
              <i class="icon icon-data-set"></i>
              使用该数据集的项目
              </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="content">
      <div class="content-box">
        <div v-if="activeTab === 1">
          <div class="filepath-header">
            <div class="filepath-header-left">
              <img class="file-icon" src="@/common/image/icon/folder.png">
              <div class="breadcrumb" v-if="curFilePath === '/'">
                <!-- <span class="file-path" @click="clickFilePath('/')">{{curDataSet.type ? '/data' : '/data'}}</span> -->
                <span class="file-path" @click="clickFilePath('/')">/data/{{username_path}}</span>
              </div>
              <div class="breadcrumb" v-else>
                <!-- <span class="file-path" @click="clickFilePath('/')">{{curDataSet.type ? '/data' : '/data'}}</span> -->
                <span class="file-path" @click="clickFilePath('/')">/data/{{username_path}}</span>
                <span class="file-path" v-for="(item, key) in filePath.slice(1)" :key="key" @click="clickFilePath(item, key)">/{{item}}</span>
              </div>
            </div>
            <div v-if="datasetOpenForPerson" class="filepath-header-right">
              <span class="tip-txt">如需修改，请先取消对其他用户的公开</span>
            </div>
            <div v-if="curDataSet.type === 0 && userInfo.userId === curDataSet.userId && !datasetOpenForPerson" class="filepath-header-right">
              <el-button-group>
                <el-button size="small"  @click="createFileFolder">新建文件夹</el-button>
                <el-dropdown>
                  <el-button size="small" class="btn-upload">
                    上传
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="clickUploadFile">上传文件</el-dropdown-item>
                    <el-dropdown-item @click.native="clickUploadFolder" v-if="isSupportDir">上传文件夹</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <el-button size="small" @click="_downLoadFile" :disabled="multipleSelection.length === 0">下载</el-button>
                <el-dropdown>
                  <el-button size="small" :disabled="multipleSelection.length === 0">
                    更多...
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="clickRename" :disabled="multipleSelection.length !== 1">重命名</el-dropdown-item>
                    <el-dropdown-item @click.native="clickCopy" :disabled="multipleSelection.length < 1">复制</el-dropdown-item>
                    <el-dropdown-item @click.native="deleteFile" :disabled="multipleSelection.length < 1">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-button-group>
            </div>
          </div>
          <div v-show="showEditor === 0">
            <div class="file-table">
              <el-table
                ref="multipleTable"
                :data="fileList"
                empty-text="暂无代码文件"
                @selection-change="handleSelectionChange"
                :header-cell-class-name="tableheaderClassName"
                style="width: 100%">
                <el-table-column type="selection" width="40" v-if="curDataSet.type === 0 && userInfo.userId === curDataSet.userId && !datasetOpenForPerson"></el-table-column>
                <el-table-column
                  label="文件/文件夹名称">
                  <template slot-scope="scope">
                    <div class="table-link" :class="{'disabled': curDataSet.activeTab === 1}" @click="clickTableRow(scope.row)">
                      <i :class="{'file-pic': scope.row.isImg, 'file-icon': !scope.row.directory && !scope.row.isImg, 'folder-icon': scope.row.directory}"></i>
                      <span>{{ scope.row.fileName }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="updateTime"
                  label="修改日期">
                  <template slot-scope="scope">
                    <span>{{ new Date(scope.row.updateTime).Format("yyyy-MM-dd hh:mm:ss") }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="size"
                  label="大小">
                  <template slot-scope="scope">
                    <span>{{ scope.row.size ? scope.row.size : '--' }}</span>
                  </template>
                </el-table-column>
              </el-table>
              <div class="basePagenate" v-show="curDataSet.type === 0">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :page-size="pageSize"
                  :current-page="pageNumber"
                  :total="totalPage"
                  layout="prev, pager, next">
                </el-pagination>
              </div>
            </div>
            <div class="markdown-box" v-if="showMarkdown">
              <!-- <div class="header-markdown">
                <span class="header-left"><img src="@/common/image/icon/book-open-variant.png">README.md</span>
                <span v-if="!editMarkdown && curDataSet.type !== 1" class="header-right" @click="doEditMarkdown"><i class="icon-edit" />编辑</span>
                <span v-else-if="editMarkdown" class="header-right">
                  <i class="icon-save" /><span @click="doSaveMarkdown">保存</span>
                  <i class="icon-cancle" /><span @click="doCancleMarkdown">取消</span>
                </span>
              </div> -->
              <div class="header-editor-box border-bottom-btn">
                <span class="header-editor-left-text"><img src="@/common/image/icon/book-open-variant.png"><span>README.md</span></span>
                <div class="header-right">
                  <span class="header-right-edit"  v-if="!editMarkdown && curDataSet.type !== 1" @click="doEditMarkdown"><i class="el-icon-edit-outline"></i><span class="">编辑</span></span>
                  <span class="header-right-save" v-else-if="editMarkdown">
                    <el-button class="icon-cancle" @click="doCancleMarkdown">取消</el-button>
                    <el-button class="icon-save" type="primary" @click="doSaveMarkdown">保存</el-button>
                  </span>
                </div>
              </div>
              <viewer
                v-show="!editMarkdown"
                :value="readmeData"
                height="500px"
                class="markdown-content"
              />
              <editor
                v-show="editMarkdown"
                ref="tuiEditor"
                v-model="readmeData"
                :options="editorOptions"
                previewStyle="vertical"
                height="500px"
              />
            </div>
          </div>
        </div>
        <div v-if="activeTab === 2">
          <ul class="data-list" v-if="curDataSet.type === 1 && userInfo.userId === curDataSet.userId || curDataSet.type === 0">
            <li v-for="item in projectView" class="item" :key="item.id" @click="toDetail(item)">
              <div class="tag">
                <div class="title">{{item.projectName}}</div>
                <p class="desc">{{item.profile ? item.profile : '无简介'}}</p>
                <p class="tag-footer">
                  <span class="tag-footer-use">
                    <img class="tag-icon" src="@/common/image/icon/task.png">
                    <span>{{item.taskNumber}}个任务</span>
                  </span>
                  <span class="tag-footer-category">
                  <span><img class="algorithm-icon" src="@/common/image/icon/icon-algorithm.png">{{item.algorithm}}</span>
                </span>
                </p>
              </div>
            </li>
          </ul>
          <ul class="project-list" v-if="curDataSet.type === 1 && userInfo.userId !== curDataSet.userId">
            <li
              v-for="item in projectView"
              class="item"
              :key="item.id"
              @click="toDetail(item)">
              <img class="image" :src="item.fileImage">
              <div class="tag">
                <div class="title">
                  <span class="name-pro">{{ item.projectName }}</span>
                  <div class="info">{{ item.userName }}</div>
                </div>
                <p class="desc">{{ item.profile }}</p>
                <p class="tag-footer">
                  <span class="count">
                    <i class="tag-icon"></i>{{ item.copyNumber }}次复制
                  </span>
                  <ul class="category">
                    <li
                      class="list"
                      v-for="(list, index) in item.categoryList"
                      :key="index"
                      v-show="index < 2"
                    >{{list.name}}</li>
                  </ul>
                </p>
              </div>
            </li>
          </ul>
          <div class="loadmore" v-if="hasNextPage">
            <p class="loadmore-box" @click="loadMore">
              <i v-show="loadingMore" class="el-icon-loading"></i>
              <span v-show="!loadingMore">加载更多...</span>
            </p>
          </div>
          <div class="no-data-box" v-show="projectView.length === 0">
            <div class="no-data">
              <img src="@/common/image/nocontent.png">
              <p class="no-data-title">暂无数据</p>
            </div>
          </div>
        </div>
      </div>
      <div v-show="showEditor === 1" class="editor-container">
        <!-- <div class="editor-header">
          <span>{{curEditFile.fileName}}</span>
          <div v-show="showEdit" class="action r action-right"><i class="icon-cancle" /><span class="action-span-hover" @click="doCancle">取消</span></div>
          <div v-show="showEdit" class="action r" @click="doEdit"><span><i class="el-icon-edit-outline"></i><span class="action-span-hover">编辑</span></span></div>
          <div v-show="!showEdit" class="r">
            <span class="action action-right"><i class="icon-save" /><span  class="action-span-hover" @click="doEditSave">保存</span><i class="icon-cancle" /><span class="action-span-hover" @click="doEditCancle">取消</span></span>
          </div>
        </div> -->
        <div class="header-editor-box">
          <span class="header-editor-left-text">{{curEditFile.fileName}}</span>
          <div class="header-right">
            <span class="header-right-edit"  v-if="showEdit" @click="doEdit"><i class="el-icon-edit-outline"></i><span class="">编辑</span></span>
            <span class="header-right-save" v-else-if="!showEdit">
              <el-button class="icon-cancle" @click="doEditCancle">取消</el-button>
              <el-button class="icon-save" type="primary" @click="doEditSave(0)">保存</el-button>
            </span>
          </div>
        </div>
        <div class="code-eidtor">
          <div ref="container" id="container" style="width:100%;height:700px;border:1px solid #ddd"></div>
        </div>
      </div>
      <div v-show="showEditor === 2" class="editor-container">
        <!-- <div class="editor-header">
          <span>{{curEditFile.fileName}}</span>
          <div v-show="!showMDEdit" class="action r action-right"><i class="icon-cancle" /><span class="action-span-hover" @click="doCancle">取消</span></div>
          <div v-show="!showMDEdit" class="action r" @click="doMDEdit"><span><i class="el-icon-edit-outline"></i><span class="action-span-hover">编辑</span></span></div>
          <div v-show="showMDEdit" class="r">
            <span class="action action-right"><i class="icon-save" /><span  class="action-span-hover" @click="doEditSave(1)">保存</span><i class="icon-cancle" /><span class="action-span-hover" @click="doMDEditCancle">取消</span></span>
          </div>
        </div> -->
        <div class="header-editor-box">
          <span class="header-editor-left-text">{{curEditFile.fileName}}</span>
          <div class="header-right">
            <span class="header-right-edit"  v-if="!showMDEdit" @click="doMDEdit"><i class="el-icon-edit-outline"></i><span class="">编辑</span></span>
            <span class="header-right-save" v-else-if="showMDEdit">
              <el-button class="icon-cancle" @click="doMDEditCancle">取消</el-button>
              <el-button class="icon-save" type="primary" @click="doEditSave(1)">保存</el-button>
            </span>
          </div>
        </div>
        <viewer
          v-show="!showMDEdit"
          :value="markdownData"
          height="500px"
          class="md-content"
        />
        <editor
          v-show="showMDEdit"
          ref="mdEditor"
          v-model="markdownData"
          :options="editorOptions"
          previewStyle="vertical"
          height="500px"
        />
      </div>
    </div>
    <el-dialog
      title="图片浏览"
      :visible.sync="dialog.picPreview"
      :pos="'center'"
      width="40%">
      <div class="file-panel picPreview">
        <img :src="curPicPreView" />
      </div>
      <!-- <div slot="footer" class="dialog-footer basebtn">
        <div>
          <button @click="dialog.picPreview=false" class="dialog-button active last">关 闭</button>
        </div>
      </div> -->
    </el-dialog>
    <!-- 创建文件夹 -->
    <el-dialog
      title="创建文件夹"
      :visible.sync="dialog.createFileFolder"
      :pos="'center'"
      :width="'440px'"
      @close="resetForm('cffForm')">
      <el-form :model="createFileFolderForm" :rules="rulesCreateFolder" ref="cffForm" @submit.native.prevent>
        <el-form-item label="文件夹名称：" :label-width="'120px'" prop="name">
          <el-input @keyup.enter.native="submitForm('cffForm')" v-model="createFileFolderForm.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer basebtn">
        <div>
          <button type="primary" @click="submitForm('cffForm')" class="dialog-button lan">确 定</button>
          <button @click="dialog.createFileFolder=false" class="dialog-button active last">取 消</button>
        </div>
      </div>
    </el-dialog>
    <!-- 公开数据集 -->
    <el-dialog
      title="公开数据集"
      :visible.sync="dialog.openDataSet"
      :pos="'center'"
      :width="'600px'"
      class="open-dataset-dialog"
      :show-close="false"
      @close="closeOpenDataSetDialog">
      <div>
        <div class="open-dataset-header">
          <el-button-group>
            <el-button class="open-dataset-header-btn" :class="{'active-user-type': selectedOpenUserType === 1}" size="small"  @click="selOpenUserType(1)">所有人</el-button>
            <el-button class="open-dataset-header-btn" :class="{'active-user-type': selectedOpenUserType === 2}" size="small"  @click="selOpenUserType(2)">个人用户</el-button>
          </el-button-group>
        </div>
        <div class="open-dataset-content" v-if="selectedOpenUserType === 1">
          <el-checkbox class="open-checkbox" v-model="openAllPerson" :disabled="isDisableOpenAll">公开给所有用户</el-checkbox>
          <p class="open-text">提示：该数据集将对所有用户可见，且无法修改</p>
        </div>
        <div class="open-dataset-content" v-else>
          <div class="user-search">
            <el-input
              v-model="searchedUser"
              class="user-search-input"
              @keyup.enter.native="_getSharingUserInfo"
              placeholder="输入邮箱号进行邀请">
            </el-input>
            <el-button class="user-search-btn" type="primary" @click="_getSharingUserInfo">搜索</el-button>
          </div>
          <div v-show="searchResult !== ''" class="user-search-result">
            <div class="user-search-result-left">
              <img class="user-search-result-header-img" :src="searchResult.headImage">
              <span class="user-search-result-name user-search-result-text">{{searchResult.username}}</span>
              <span class="user-search-result-email user-search-result-text">{{searchResult.email}}</span>
            </div>
            <div class="user-search-result-right" @click="addToFriednUserList">
              <img class="user-search-result-add-img" src="@/common/image/team-add-people.png">
            </div>
          </div>
          <div class="user-selected">
            <ul class="user-selected-list" :class="{'user-selected-list-box':friendUserList.length>5}">
              <li class="user-selected-item" v-for="(item, index) in friendUserList" :key="index">
                <div class="user-selected-item-left">
                  <img class="user-selected-item-header-img" :src="item.headImage">
                  <div class="user-selected-item-text">
                    <span class="user-selected-item-name">{{item.username}}</span>
                    <span class="user-selected-item-email">{{item.email}}</span>
                  </div>
                </div>
                <div class="user-selected-item-right" @click="deleteFromFriednUserList(index)">
                  <img class="user-selected-item-add-img" src="@/common/image/delete-members.png">
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- <el-tabs type="border-card">
        <el-tab-pane label="所有人">
          <div>
            <p class="open-text">该数据集将对所有用户可见。</p>
            <el-checkbox class="open-checkbox" v-model="openAllPerson" :disabled="isDisableOpenAll">公开给所有用户</el-checkbox>
          </div>
        </el-tab-pane>
        <el-tab-pane label="个人用户">
          <div class="user-search">
            <el-input
              v-model="searchedUser"
              class="user-search-input"
              placeholder="输入邮箱号搜索用户">
            </el-input>
            <el-button type="primary" @click="_getSharingUserInfo">搜索</el-button>
          </div>
          <div v-if="searchResult !== ''" class="user-search-result">
            <div class="user-search-result-left">
              <img class="user-search-result-header-img" :src="searchResult.headImage">
              <span class="user-search-result-name user-search-result-text">{{searchResult.username}}</span>
              <span class="user-search-result-email user-search-result-text">{{searchResult.email}}</span>
            </div>
            <div class="user-search-result-right" @click="addToFriednUserList">
              <img class="user-search-result-add-img" src="@/common/image/team-add-people.png">
            </div>
          </div>
          <div class="user-selected">
            <ul class="user-selected-list">
              <li class="user-selected-item" v-for="(item, index) in friendUserList" :key="index">
                <div class="user-selected-item-left">
                  <img class="user-selected-item-header-img" :src="item.headImage">
                  <div class="user-selected-item-text">
                    <span class="user-selected-item-name">{{item.username}}</span>
                    <span class="user-selected-item-email">{{item.email}}</span>
                  </div>
                </div>
                <div class="user-selected-item-right" @click="deleteFromFriednUserList(index)">
                  <img class="user-selected-item-add-img" src="@/common/image/delete-members.png">
                </div>
              </li>
            </ul>
          </div>
        </el-tab-pane>
      </el-tabs> -->
      <div slot="footer" class="dialog-footer">
        <div>
          <button @click="dialog.openDataSet=false" class="open-dataset-footer-btn">取 消</button>
          <button type="primary" @click="_openDataSet" class="open-dataset-footer-btn open-dataset-footer-active">确 定</button>
        </div>
      </div>
    </el-dialog>
    <!-- 重命名 -->
    <el-dialog
      title="重命名"
      :visible.sync="dialog.rename"
      :pos="'center'"
      :width="'440px'"
      @close="resetForm('renameForm')">
      <el-form :model="renameForm" :rules="rulesRename" ref="renameForm" @submit.native.prevent>
        <el-form-item label="名称：" :label-width="'80px'" prop="name">
          <el-input @keyup.enter.native="submitForm('renameForm')" v-model="renameForm.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer basebtn">
        <div>
          <button type="primary" @click="submitForm('renameForm')" class="dialog-button lan">确 定</button>
          <button @click="dialog.rename=false" class="dialog-button active last">取 消</button>
        </div>
      </div>
    </el-dialog>
    <!-- 上传列表 -->
    <el-dialog
      title="上传列表"
      :visible.sync="dialog.uploadList"
      :close-on-click-modal="false"
      @close="closeUploadDialog"
      :pos="'center'"
      :width="'600px'">
      <div class="file-panel">
        <h2>文件列表</h2>
        <div class="file-list">
          <ul class="file-item" :class="`file-${file.id}`" v-for="(file, index) in uploadFileList" :key="index">
            <li class="file-type"></li>
            <li class="file-name">{{file.name}}</li>
            <li class="file-size">{{fileSize(file.size)}}</li>
            <li class="file-status">待上传</li>
            <li class="progress"></li>
          </ul>
          <div class="no-file" v-if="!uploadFileList.length"><i class="iconfont icon-empty-file"></i> 暂无待上传文件</div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer basebtn">
        <div>
          <button type="primary" @click="startUpload()" class="dialog-button lan">开始上传</button>
          <button @click="cancleUpload" class="dialog-button active last">取 消</button>
        </div>
      </div>
    </el-dialog>
    <!-- 上传文件组件 -->
    <div id="filePicker" class="upload-location">上传文件</div>
    <vue-upload
      ref="uploader"
      uploadButton="#filePicker"
      url="/gateway/fileCenter/api/file/upload?type=3"
      multiple
      :headers="uploadHeader"
      @fileChange="fileChange"
      :fileSingleSizeLimit="fileSingleSize"
      @uploadStart="onUploadStart"
      @progress="onProgress"
      @completeAll="onAllSuccess"
      @error="onError"
    ></vue-upload>
  </div>
</template>

<script>
import 'tui-editor/dist/tui-editor.css'
import 'tui-editor/dist/tui-editor-contents.css'
import 'codemirror/lib/codemirror.css'
import { Editor, Viewer } from '@toast-ui/vue-editor'
import { verifyFileType } from '@/common/js/utils'

import vueUpload from '@/base/vue-upload'

import { openDataSet, checkDataSetPublicPersonFlag, getDataSetSharingUserList, getSharingUserInfo, getUserAttentionStatus, attentionDataSet } from '@/api/dataset'
import { getProjectListByDatasetId, getUserProjectListByDatasetId } from '@/api/project'
import { apiGetFileList, getPublicDatasetFileList, apiCreateFileFolder, apiRename, apiCopy, apiDeleteFile } from '@/api/filecenter'
import { mapGetters, mapMutations } from 'vuex'

import * as monaco from 'monaco-editor'

import axios from 'axios'
import store from '@/store.js'
import qs from 'qs'

const WebUploaderObj = window.WebUploader
// 表单校验-name-长度校验
const validateName = (rule, value, callback) => {
  if (value.length > 30) {
    callback(new Error('名称长度须在1到30个字符之间'))
  } else {
    callback()
  }
}

export default {
  components: {
    'editor': Editor,
    'viewer': Viewer,
    vueUpload
  },
  data () {
    return {
      // 展示Markdown
      showMarkdown: false,
      // 编辑markdown
      editMarkdown: false,
      // markdown文件内容
      markdownData: '',
      // readme文件内容
      readmeData: '',
      editorOptions: {
        hideModeSwitch: true
      },
      // Table选择项
      multipleSelection: [],
      // 总页数
      totalPage: 0,
      // 每页条数
      pageSize: 10,
      pageProjectSize: 12,
      // 当前页
      pageNumber: 1,
      pageNumberProject: 1,
      usedProject: [],
      dialog: {
        openDataSet: false,
        picPreview: false,
        createFileFolder: false,
        uploadList: false,
        rename: false
      },
      remarkHtml: '',
      // 文件列表
      fileList: [],
      // 上传文件列表
      uploadFileList: [],
      // 文件路径
      filePath: ['/'],
      // 当前文件路径
      curFilePath: '/',
      // 使用数据集的项目列表
      projectView: [],
      // 是否有下一页
      hasNextPage: false,
      // Loading
      loadingMore: false,
      // 公开数据集搜索用户
      searchedUser: '',
      // 已选个人用户列表
      friendUserList: [],
      // 是否开发所有人
      openAllPerson: false,
      checkedFriends: [],
      isDisableOpenAll: false,
      bottom: false,
      finished: false,
      // 弹窗表单-创建文件夹
      createFileFolderForm: {
        name: ''
      },
      // 弹窗表单-重命名
      renameForm: {
        name: ''
      },
      // 表单验证规则-创建文件夹
      rulesCreateFolder: {
        name: [
          { required: true, message: '请输入文件名称', trigger: 'blur' },
          { validator: validateName, trigger: 'blur' }
        ]
      },
      // 表单验证规则-重命名
      rulesRename: {
        name: [
          { required: true, message: '请输入文件名称', trigger: 'blur' }
        ]
      },
      isSupportDir: true,
      // 显示编辑器
      showEditor: 0,
      // 当前编辑文件
      curEditFile: '',
      // 当前浏览图片
      curPicPreView: '',
      // 编辑器显示编辑按钮
      showEdit: true,
      showMDEdit: false,
      // 编辑器是否可编辑
      readOnly: true,
      editor: '',
      // 文件内容
      fileContent: '',
      // 文件内容 原始
      fileContentOriginal: '',
      // 上传文件大小限制
      fileSingleSize: 500 * 1024 * 1024,
      flag: false,
      // 公开项目搜索个人用户搜索结果
      searchResult: '',
      // 数据集是否公开给个人
      datasetOpenForPerson: false,
      // 公开数据集是否关注
      isFocus: false,
      // 公开数据集关注数量
      focusNumber: 0,
      // 公开数据集标签类型（1：所有人，2：个人用户）
      selectedOpenUserType: 1,
      username_path: ''
    }
  },
  methods: {
    // 处理分开查询接口调用
    handleQueryProject () {
      if (this.curDataSet.type === 1 && this.curDataSet.userId !== this.userInfo.userId) {
        this._getProjectListByDatasetId()
      } else {
        this._getUserProjectListByDatasetId()
      }
    },
    // 公开数据集选择公开类型（所有人，个人用户）
    selOpenUserType (val) {
      this.selectedOpenUserType = val
    },
    // 公开数据集点击添加搜索结果
    addToFriednUserList () {
      if (this.searchResult.email === this.curDataSet.provider) {
        this.$message({ message: '数据集无法公开给所有者', showClose: true, type: 'warning' })
        return false
      }
      const checkHasAdded = this.friendUserList.findIndex(el => {
        return el.userId === this.searchResult.userId
      })
      if (checkHasAdded === -1) {
        this.friendUserList.push(this.searchResult)
        this.checkedFriends.push(this.searchResult.userId)
        this.searchResult = ''
      } else {
        this.$message({ message: '该用户已添加', showClose: true, type: 'warning' })
      }
    },
    // 公开数据集已选用户移除
    deleteFromFriednUserList (index) {
      this.friendUserList.splice(index, 1)
      this.checkedFriends.splice(index, 1)
    },
    // 点击切换关注
    toggleFocus () {
      const flag = this.isFocus ? 0 : 1
      this._attentionDataSet(flag)
      this.isFocus = !this.isFocus
    },
    // 点击重命名
    clickRename () {
      if (this.datasetOpenForPerson) {
        this.$message({ message: '如需修改，请先取消对其他用户的公开', showClose: true, type: 'warning' })
        return false
      }
      this.dialog.rename = true
      this.renameForm.name = this.multipleSelection[0].fileName
    },
    // 点击复制
    clickCopy () {
      if (this.datasetOpenForPerson) {
        this.$message({ message: '如需修改，请先取消对其他用户的公开', showClose: true, type: 'warning' })
        return false
      }
      this._copy()
    },
    createFileFolder () {
      if (this.datasetOpenForPerson) {
        this.$message({ message: '如需修改，请先取消对其他用户的公开', showClose: true, type: 'warning' })
        return false
      }
      this.dialog.createFileFolder = true
    },
    // 删除文件或文件夹
    deleteFile () {
      if (this.datasetOpenForPerson) {
        this.$message({ message: '如需修改，请先取消对其他用户的公开', showClose: true, type: 'warning' })
        return false
      }
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this._deleteFile()
      })
    },
    // 点击上传文件-选择文件
    clickUploadFile () {
      if (this.datasetOpenForPerson) {
        this.$message({ message: '如需修改，请先取消对其他用户的公开', showClose: true, type: 'warning' })
        return false
      }
      this.uploader.reset()
      this.flag = false
      this.uploadFileList = []
      document.getElementById('filePicker').getElementsByTagName('input')[0].removeAttribute('webkitdirectory')
      document.getElementById('filePicker').getElementsByTagName('label')[0].click()
    },
    // 点击上传文件-选择文件夹
    clickUploadFolder () {
      if (this.datasetOpenForPerson) {
        this.$message({ message: '如需修改，请先取消对其他用户的公开', showClose: true, type: 'warning' })
        return false
      }
      this.uploader.reset()
      this.flag = false
      this.uploadFileList = []
      document.getElementById('filePicker').getElementsByTagName('input')[0].setAttribute('webkitdirectory', '')
      document.getElementById('filePicker').getElementsByTagName('label')[0].click()
    },
    // Table多选操作
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    // table头部样式
    tableheaderClassName ({ row, rowIndex }) {
      return 'table-head-th'
    },
    // 分页
    handleSizeChange (val) {
      this.pageSize = val
      this.pageNumber = 1
      this._getFileList(this.curFilePath)
    },
    handleCurrentChange (val) {
      this.pageNumber = val
      this._getFileList(this.curFilePath)
    },
    // 公开数据集
    openDataSet () {
      this.dialog.openDataSet = true
      this._getDataSetSharingUser()
    },
    // tab页切换
    toggleActive (val) {
      this.showEditor = 0
      this.showEdit = true
      if (val === 1) {
        this.curFilePath = '/' + this.curDataSet.name
        if (this.curFilePath === '/') {
          this.filePath = ['/']
        } else {
          let arr = this.curFilePath.split('/')
          arr[0] = '/'
          this.filePath = arr
        }
        this.pageNumber = 1
        this.$router.push({ path: '/dataset/detail', query: { active: 1 } })
        this._getFileList(this.curFilePath)
      } else if (val === 2) {
        this.pageNumberProject = 1
        this.projectView = []
        this.$router.push({ path: '/dataset/detail', query: { active: 2 } })
        this.handleQueryProject()
      }
    },
    toProject () {},
    // 点击文件路径
    clickFilePath (val, key) {
      this.pageNumber = 1
      this.showEditor = 0
      this.showEdit = true
      this.showMDEdit = false
      if (val === '/') {
        return false
      } else {
        let path = ''
        let pathArr = this.filePath.slice(0, key + 2)
        this.filePath = pathArr
        pathArr.map((item, index) => {
          if (index === 0) {
            path = item
          } else if (index === 1) {
            path = path + item
          } else {
            path = `${path}/${item}`
          }
        })
        this.curFilePath = path
        this._getFileList(path)
      }
    },
    // 点击Table列
    clickTableRow (row) {
      if (this.curDataSet.activeTab === 1) {
        return false
      } else {
        // if (row.directory) {
        //   this.goToFolder(row.fileName)
        // }
        if (row.directory) {
          this.goToFolder(row.fileName)
          this.showEditor = 0
        } else if (row.isImg) {
          this.dialog.picPreview = true
          this._previewImg2(row).then(res => {
            this.curPicPreView = URL.createObjectURL(res)
          })
        } else {
          let fileType = row.fileName.replace(/.+\./, '')
          if (fileType === 'md') {
            this.curEditFile = row
            this.fileContent = ''
            this._getFileContent(row.fileName, true)
            this.showEditor = 2
          } else if (verifyFileType(fileType)) {
            this.curEditFile = row
            this.fileContent = ''
            this._getFileContent(row.fileName)
            this.showEditor = 1
          } else {
            this.$message({ message: '暂不支持该文件类型预览', showClose: true, type: 'warning' })
          }
        }
      }
    },
    // 图片预览
    _previewImg2 (row) {
      let separator = this.curFilePath === '/' ? '' : '/'
      let fileUrl = `/gateway/fileCenter/api/file/preview?type=3&path=${this.curFilePath + separator + row.fileName}`
      return axios({
        method: 'get',
        url: fileUrl,
        responseType: 'blob',
        emulateJSON: true
      }).then(res => {
        return Promise.resolve(res.data)
      })
    },
    // 点击文件夹
    goToFolder (dir) {
      this.pageNumber = 1
      if (this.curFilePath === '/') {
        this.curFilePath = `/${dir}`
      } else {
        this.curFilePath = `${this.curFilePath}/${dir}`
      }
      this.filePath.push(dir)
      this._getFileList(this.curFilePath)
    },
    // 项目详情
    toDetail (item) {
      this.storeProject(item)
      let path = item.type === 1 ? `/openproject/detail?id=${item.id}` : `/project/detail/task?projectid=${item.id}`
      this.$router.push(path)
    },
    // 项目加载更多
    loadMore () {
      this.loadingMore = true
      this.pageNumberProject++
      this.handleQueryProject()
    },
    // 选择用户
    handleUserSelect (item) {
      let flag = true
      this.friendUserList.map(el => {
        if (item.userId === el.userId) {
          flag = false
        }
      })
      if (flag) {
        this.friendUserList.push(item)
      }
    },
    // 处理滚动事件
    handleScroll () {
      let footerHeight = document.getElementById('footer').clientHeight
      let scrollY = window.scrollY
      let visible = document.documentElement.clientHeight
      let pageHeight = document.documentElement.scrollHeight - (footerHeight / 2)
      let bottomOfPage = visible + scrollY >= pageHeight
      this.bottom = bottomOfPage || pageHeight < visible
    },
    // 表单提交(cffForm：创建文件夹;renameForm：重命名)
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (formName === 'cffForm') {
            this._createFileFolder()
            this.dialog.createFileFolder = false
          } else if (formName === 'renameForm') {
            this._rename()
            this.dialog.rename = false
          }
          this.resetForm(formName)
        } else {
          return false
        }
      })
    },
    // 获取文件大小
    fileSize (size) {
      return WebUploaderObj.Base.formatSize(size)
    },
    // 开始上传
    startUpload () {
      this.resume()
    },
    cancleUpload () {
      this.dialog.uploadList = false
      this.uploader.reset()
    },
    closeUploadDialog () {
      this.uploader.reset()
    },
    closeOpenDataSetDialog () {
      this.searchedUser = ''
      this.searchResult = ''
    },
    fileChange (file) {
      if (!this.flag) {
        this.dialog.uploadList = true
        this.uploadFileList.push(file)
      }
    },
    // 上传错误
    onError (msg) {
      this.uploader.reset()
      this.dialog.uploadList = false
      this.flag = true
      this.$message({ message: msg, showClose: true, type: 'warning' })
    },
    onUploadStart (file) {
      let dir = ''
      let source = file.source.source
      if (source.webkitRelativePath) {
        let separator = this.curFilePath === '/' ? '' : '/'
        dir = this.curFilePath + separator + source.webkitRelativePath.slice(0, source.webkitRelativePath.lastIndexOf('/' + source.name))
      } else {
        dir = this.curFilePath
      }
      let formData = {
        'dir': dir,
        'userId': this.userId,
        'name': source.name
      }
      this.uploader.uploader.options.formData = formData
    },
    onProgress (file, percent) {
      $(`.file-${file.id} .progress`).css('width', percent * 100 + '%')
      $(`.file-${file.id} .file-status`).html((percent * 100).toFixed(2) + '%')
    },
    onSuccess (file, response) {
      this.dialog.uploadList = false
      this._getFileList(this.curFilePath)
    },
    onAllSuccess () {
      this.dialog.uploadList = false
      this._getFileList(this.curFilePath)
      this._getFileContent()
    },
    resume (file) {
      this.uploader.upload(file)
    },
    // 重置表单
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    // 编辑markdown
    doEditMarkdown () {
      this.editMarkdown = true
      this.$nextTick(() => {
        this.$refs.tuiEditor.invoke('setValue', this.readmeData)
        this.$refs.tuiEditor.invoke('scrollTop', 1)
      })
    },
    // 保存markdown
    doSaveMarkdown () {
      let blob = new Blob([this.$refs.tuiEditor.invoke('getValue')], { type: 'text/plain' })
      let fd = new FormData()
      // let datasetName = this.curFilePath.split('datasets/')[1].split('/')[0]
      fd.append('dir', `/${this.curDataSet.name}`)
      fd.append('type', 3)
      fd.append('name', 'README.md')
      fd.append('file', blob, 'README.md')
      let url = `/gateway/fileCenter/api/file/upload`
      axios({
        method: 'post',
        url: url,
        data: fd
      }).then(res => {
        this.$message({ message: '保存成功', showClose: true, type: 'success' })
        this.editMarkdown = false
        this._getFileContent()
      })
    },
    // 取消编辑markdown
    doCancleMarkdown () {
      this.editMarkdown = false
      this.$nextTick(() => {
        this.$refs.tuiEditor.invoke('setValue', this.fileContentOriginal)
        this.$refs.tuiEditor.invoke('scrollTop', 1)
      })
    },
    // 浏览器检测input是否具有webkitdirectory属性
    isInputDirSupported () {
      let tmpInput = document.createElement('input')
      if ('webkitdirectory' in tmpInput || 'mozdirectory' in tmpInput || 'odirectory' in tmpInput || 'msdirectory' in tmpInput || 'directory' in tmpInput) {
        return true
      } else {
        return false
      }
    },
    // 点击编辑
    doEdit () {
      this.showEdit = false
      this.editor.updateOptions({ readOnly: false })
    },
    doMDEdit () {
      this.showMDEdit = true
      this.$nextTick(() => {
        this.$refs.mdEditor.invoke('setValue', this.markdownData)
        this.$refs.mdEditor.invoke('scrollTop', 1)
      })
    },
    doCancle () {
      this.showEditor = 0
    },
    // 点击编辑保存
    doEditSave (type = 0) {
      let blob = ''
      if (type === 0) {
        blob = new Blob([this.editor.getValue()], { type: 'application/octet-stream' })
      } else {
        blob = new Blob([this.$refs.mdEditor.invoke('getValue')], { type: 'text/plain' })
      }
      let fd = new FormData()
      fd.append('dir', this.curFilePath)
      fd.append('name', this.curEditFile.fileName)
      fd.append('type', 3)
      fd.append('file', blob, this.curEditFile.fileName)
      let url = `/gateway/fileCenter/api/file/upload`
      axios({
        method: 'post',
        url: url,
        data: fd
      }).then(res => {
        this.$message({ message: '保存成功', showClose: true, type: 'success' })
        this.showEdit = true
        this.showEditor = 0
        this.showMDEdit = false
        this._getFileContent()
        this._getFileList(this.curFilePath)
      })
    },
    // 点击编辑取消
    doEditCancle () {
      // this.editor.setValue(this.fileContent)
      this.editor.setValue(this.fileContentOriginal)
      this.showEdit = true
      this.editor.updateOptions({ readOnly: true })
    },
    doMDEditCancle () {
      this.$refs.mdEditor.invoke('setValue', this.fileContentOriginal)
      this.showMDEdit = false
    },
    /*
      -----接口调用-----
    */
    // 查询文件列表(数据集结构)
    _getFileList (path) {
      let apiMethod = ''
      let para = ''
      if (this.curDataSet.activeTab === 1) {
        if (path.split('/').length === 2) {
          path = '/'
        } else {
          path = path.split(this.filePath[1])[1]
        }
        apiMethod = getPublicDatasetFileList
        // para = `?number=${this.curDataSet.number}&dir=${path}&pageNumber=${this.pageNumber}&pageSize=${this.pageSize}`
        para = `?number=${this.curDataSet.number}`
      } else {
        apiMethod = apiGetFileList
        // para = `?dir=${path}&pageNumber=${this.pageNumber}&pageSize=${this.pageSize}`
        para = `?type=3&dir=${path}&pageNumber=${this.pageNumber}&pageSize=${this.pageSize}`
      }
      apiMethod(para).then(res => {
        if (res.message.code === 0) {
          this.totalPage = res.data.totalCount
          this.fileList = res.data.fileList
          // 判断是否是图片
          let imgExt = ['.png', '.jpg', '.jpeg', '.bmp', '.gif']
          if (this.fileList !== null) {
            this.fileList.forEach(el => {
              let isImg = imgExt.contain(el.fileName.extension())
              el.isImg = isImg
              if (isImg) {
                let preOpt = {}
                let separator = this.curFilePath === '/' ? '' : '/'
                preOpt.src = `/gateway/fileCenter/api/file/preview?type=3&path=${this.curFilePath + separator + el.fileName}`
                el.preOpt = preOpt
              }
            })
          }
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 查询数据集关注情况
    _getUserAttentionStatus () {
      let para = `?datasetId=${this.curDataSet.id}`
      getUserAttentionStatus(para).then(res => {
        if (res.message.code === 0) {
          this.focusNumber = res.data.attentionCount
          this.isFocus = res.data.attentionFlag
          this.username_path = res.data.username
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 关注/取消关注数据集
    _attentionDataSet (flag) {
      let para = `?dataSetId=${this.curDataSet.id}&attentionFlag=${flag}`
      attentionDataSet(para).then(res => {
        if (res.message.code === 0) {
          this.$message({ message: `${flag === 0 ? '取消关注' : '关注'}成功`, showClose: true, type: 'success' })
          this._getUserAttentionStatus()
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 使用该数据集的项目列表
    _getProjectListByDatasetId () {
      let para = `?datasetId=${this.curDataSet.id}&pageNumber=${this.pageNumberProject}&pageSize=${this.pageProjectSize}`
      this.finished = true
      getProjectListByDatasetId(para).then(res => {
        this.loadingMore = false
        if (res.message.code === 0) {
          this.loadingMore = false
          this.hasNextPage = res.data.hasNextPage
          this.projectView = this.projectView.concat(res.data.list)
          if (this.hasNextPage) {
            this.finished = false
          }
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 我的数据集的项目列表
    _getUserProjectListByDatasetId () {
      let para = `?datasetId=${this.curDataSet.id}&pageNumber=${this.pageNumberProject}&pageSize=${this.pageProjectSize}`
      this.finished = true
      getUserProjectListByDatasetId(para).then(res => {
        this.loadingMore = false
        if (res.message.code === 0) {
          this.loadingMore = false
          this.hasNextPage = res.data.hasNextPage
          this.projectView = this.projectView.concat(res.data.list)
          if (this.hasNextPage) {
            this.finished = false
          }
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 查询数据集共享人员信息
    _getDataSetSharingUser () {
      let para = `?datasetId=${this.curDataSet.id}`
      getDataSetSharingUserList(para).then(res => {
        if (res.message.code === 0) {
          if (res.data.openAllPerson) {
            this.isDisableOpenAll = true
          }
          this.openAllPerson = res.data.openAllPerson
          this.friendUserList = res.data.friendUserList
          this.checkedFriends = res.data.friendUserList.map(item => {
            return item.userId
          })
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 公开数据集
    _openDataSet () {
      let data = {}
      data.datasetId = this.curDataSet.id
      data.openAllPerson = this.openAllPerson
      data.friendUserIdList = this.checkedFriends
      if (this.openAllPerson) {
        this.$confirm('公开给所有用户的数据集，无法取消公开, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          openDataSet(data).then(res => {
            if (res.message.code === 0) {
              this.$message({ message: '操作成功', showClose: true, type: 'success' })
              this._checkDataSetPublicPersonFlag()
              this.dialog.openDataSet = false
              this.searchedUser = ''
              this.curDataSet.type = 1
              this.storeDataSet(this.curDataSet)
            } else {
              this.$message({ message: res.message.message, showClose: true, type: 'error' })
            }
          })
        })
      } else {
        openDataSet(data).then(res => {
          if (res.message.code === 0) {
            this.$message({ message: '操作成功', showClose: true, type: 'success' })
            this._checkDataSetPublicPersonFlag()
            this.dialog.openDataSet = false
            this.searchedUser = ''
          } else if (res.message.code === 20014) {
            this.$message({ message: '数据集无法公开给所有者', showClose: true, type: 'warning' })
          } else {
            this.$message({ message: res.message.message, showClose: true, type: 'error' })
          }
        })
      }
    },
    // 创建文件夹
    _createFileFolder () {
      let path = ''
      if (this.curFilePath === '/') {
        path = `/${this.createFileFolderForm.name}`
      } else {
        path = `${this.curFilePath}/${this.createFileFolderForm.name}`
      }
      let para = qs.stringify({
        type: 3,
        dir: path
      })
      apiCreateFileFolder(para).then(res => {
        if (res.message.code === 0) {
          this.$message({ message: '创建文件夹成功', showClose: true, type: 'success' })
          this._getFileList(this.curFilePath)
        } else if (res.message.code === 10000) {
          this.$message({ message: '文件夹已存在，请换个名字试试。', showClose: true, type: 'warning' })
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 重命名文件或文件夹
    _rename () {
      let para = ''
      let separator = this.curFilePath === '/' ? '' : '/'
      para = `?type=3&dir=${this.curFilePath + separator + this.multipleSelection[0].fileName}&newDir=${this.curFilePath + separator + this.renameForm.name}`
      apiRename(para).then(res => {
        if (res.message.code === 0) {
          this.$message({ message: '重命名成功', showClose: true, type: 'success' })
          this._getFileList(this.curFilePath)
        } else if (res.message.code === 10000) {
          this.$message({ message: '文件或文件夹已存在，请换个名字试试。', showClose: true, type: 'warning' })
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 复制
    _copy () {
      let dirs = ''
      let separator = this.curFilePath === '/' ? '' : '/'
      this.multipleSelection.map(item => {
        dirs = dirs + '&dirs=' + this.curFilePath + separator + item.fileName
      })
      let para = `?type=3${dirs}`
      apiCopy(para).then(res => {
        if (res.message.code === 0) {
          this.$message({ message: '复制成功', showClose: true, type: 'success' })
          this._getFileList(this.curFilePath)
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 删除文件或文件夹
    _deleteFile (name) {
      let dirs = ''
      let separator = ''
      let para = ''
      if (name) {
        separator = this.curFilePath === '/' ? '' : '/'
        dirs = `&dirs=${this.curFilePath + separator + name}`
        para = `?type=3${dirs}`
      } else {
        separator = this.curFilePath === '/' ? '' : '/'
        this.multipleSelection.map(item => {
          dirs = dirs + '&dirs=' + this.curFilePath + separator + item.fileName
        })
        para = `?type=3${dirs}`
      }
      apiDeleteFile(para).then(res => {
        if (res.message.code === 0) {
          this.$message({ message: '删除文件成功', showClose: true, type: 'success' })
          this.pageNumber = this.pageNumber - 1
          this._getFileList(this.curFilePath)
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 下载文件
    _downLoadFile () {
      if (this.datasetOpenForPerson) {
        this.$message({ message: '如需修改，请先取消对其他用户的公开', showClose: true, type: 'warning' })
        return false
      }
      if (this.multipleSelection.length === 0) {
        return false
      }
      let dirs = ''
      const separator = this.curFilePath === '/' ? '' : '/'
      let fileName = ''
      this.multipleSelection.map((item, index) => {
        if (index === 0) {
          dirs = '&dirs=' + this.curFilePath + separator + item.fileName
        } else {
          dirs = dirs + '&dirs=' + this.curFilePath + separator + item.fileName
        }
      })
      if (this.multipleSelection.length === 1 && !this.multipleSelection[0].directory) {
        fileName = this.multipleSelection[0].fileName
      } else {
        fileName = 'package.zip'
      }
      const fileUrl = `/gateway/fileCenter/api/file/download?type=3${dirs}`
      axios.get(fileUrl, {
        responseType: 'arraybuffer'
      }).then(res => {
        const fileContent = res.data
        const blob = new Blob([fileContent], { type: 'application/octet-stream' })
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(blob, fileName)
        } else {
          // 创建新的URL表示指定的File对象或者Blob对象
          const URL = window.URL || window.webkitURL
          const aTag = document.createElement('a')
          aTag.style = 'display: none'
          aTag.download = fileName
          aTag.href = URL.createObjectURL(blob)
          document.body.appendChild(aTag)
          aTag.click()
          document.body.removeChild(aTag)
          URL.revokeObjectURL(blob)
        }
        // 下载完成，清空Table用户选择
        this.multipleSelection = []
        this.$refs.multipleTable.clearSelection()
      })
    },
    // 下载文件内容
    _getFileContent (fileName, isMDFile = false) {
      let separator = ''
      let fileUrl = ''
      if (fileName) {
        separator = this.curFilePath === '/' ? '' : '/'
        fileUrl = `/gateway/fileCenter/api/file/preview?type=3&path=${this.curFilePath + separator + fileName}`
      } else {
        // let projetName = this.curFilePath.split('projects/')[1].split('/')[0]
        if (this.curDataSet.type === 1) {
          fileUrl = `/gateway/fileCenter/api/file/publicDatasetFile/preview?number=${this.curDataSet.number}&path=/README.md`
        } else {
          fileUrl = `/gateway/fileCenter/api/file/preview?type=3&path=/${this.curDataSet.name}/README.md`
        }
      }
      axios({
        method: 'get',
        url: fileUrl
      }).then(res => {
        if (fileName && !isMDFile) {
          this.fileContent = res.data
          this.fileContentOriginal = res.data
          this.$refs.container.innerHTML = ''
          this.editor = monaco.editor.create(document.getElementById('container'), {
            value: '',
            language: 'python',
            readOnly: true
          })
          // this.editor.setValue(this.fileContent)
          if (typeof this.fileContent === 'object') {
            this.fileContent = res.request.response
            this.fileContentOriginal = res.request.response
            this.editor.setValue(this.fileContent)
          } else {
            this.editor.setValue(String(this.fileContent))
          }
        } else if (fileName && isMDFile) {
          if (res.data === '') {
            this.showEditor = 0
          } else {
            this.showEditor = 2
            this.markdownData = res.data
            this.fileContentOriginal = res.data
          }
        } else {
          if (res.data === '') {
            this.showMarkdown = false
          } else {
            this.showMarkdown = true
            this.readmeData = res.data
            this.fileContentOriginal = res.data
          }
        }
      })
    },
    // 数据集是否公开给个人用户
    _checkDataSetPublicPersonFlag () {
      const para = `?datasetId=${this.curDataSet.id}`
      checkDataSetPublicPersonFlag(para).then(res => {
        if (res.message.code === 0) {
          this.datasetOpenForPerson = res.data
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 搜索用户
    _getSharingUserInfo () {
      if (this.searchedUser === '') {
        this.$message({ message: '请输入邮箱进行搜索', showClose: true, type: 'warning' })
        return
      }
      const para = `?email=${this.searchedUser}`
      getSharingUserInfo(para).then(res => {
        if (res.message.code === 0) {
          this.searchResult = res.data
          if (this.searchResult !== '') {
            this.searchResult.email = this.searchedUser
          }
        } else if (res.message.code === 20005) {
          this.$message({ message: '没有查找到相关用户', showClose: true, type: 'warning' })
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    ...mapMutations({
      storeProject: 'SET_CUR_PROJECT',
      storeDataSet: 'SET_CUR_DATASET'
    })
  },
  beforeMount () {
    window.addEventListener('scroll', this.handleScroll)
  },
  mounted () {
    this.isSupportDir = this.isInputDirSupported()
    if (this.$route.query.active && Number(this.$route.query.active) === 2) {
      this.toggleActive(2)
    } else {
      this.toggleActive(1)
      this._getFileContent()
      this._getUserAttentionStatus()
    }
    this._checkDataSetPublicPersonFlag()
  },
  computed: {
    ...mapGetters([
      'curDataSet',
      'userInfo'
    ]),
    activeTab: {
      get: function () {
        if (this.$route.query.active) {
          return Number(this.$route.query.active)
        } else {
          return 1
        }
      }
    },
    // WebUploader对象
    uploader () {
      return this.$refs.uploader
    },
    uploadHeader: () => {
      let obj = {
        token: store.state.userInfo.token,
        bitaToken: store.state.userInfo.bitaToken,
        userId: store.state.userInfo.userId
      }
      return obj
    }
  },
  watch: {
    bottom: function (bottom) {
      if (this.finished === true) {
        return
      }
      if (bottom) {
        this.loadingMore = true
        this.pageNumberProject++
        this.handleQueryProject()
      }
    }
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style lang="stylus">
@import "../../common/stylus/mixin"
@import "../../common/stylus/base"
@import "../../common/stylus/core/dataset-detail"
@import "../../common/stylus/header_editor_box"
.dataset-detail
  .header
    background #f4f7f8
    .header-content-box
      display flex
      height 70%
      width 100%
      margin 0 auto
      max-width 1162px
      padding-top 30px
      box-sizing border-box
      .header-left
        width 50%
        .title
          font-weight 600
          font-size 28px
          color #2D323B
        .desc
          max-height 95px
          padding 20px 0
          font-size 14px
          color #6E6E6E
          line-height 24px
          box-sizing border-box
          overflow hidden
          text-overflow ellipsis
          display -webkit-box
          /*! autoprefixer: off */
          -webkit-box-orient vertical
          /* autoprefixer: on */
          -webkit-line-clamp 3
          margin 10px 0
          box-sizing border-box
          word-break break-all
          word-wrap break-word
      .header-right
        width 50%
        display flex
        justify-content flex-end
        .action
          height 20px
          line-height 20px
          .dataset-open
            font-size 14px
            color #6E6E6E
            cursor pointer
            display inline-flex
            margin-right 12px
            &:hover
              color #4285f4
          .dataset-opened
            color #666666
            cursor pointer
            display inline-flex
            font-size 14px
            &:hover
              color #4285f4
          .icon-open
            width 16px
            margin-right 7px
            background url('../../common/image/icon/open.png') 50% 50% no-repeat
            background-size contain
        .dataset-focus
          font-size 14px
          color #2d323b
          display flex
          align-items center
          .focus-text-active
            color #3C4349!important
          .focus-text
            background #f1f2f2
            border 1px solid #d1d2d3
            border-radius 3px 0px 0px 3px
            padding 4px 11px
            display flex
            align-items center
            height 20px
            line-height 20px
            box-sizing content-box
            color #3C4349
            &:hover
              color #4285f4
              cursor pointer
            .icon-focus
              width 13px
              margin-right 2px
              background url('../../common/image/icon/icon-focus-no.png') no-repeat
              background-size 13px 13px
              height 13px
              display inline-block
            .icon-focus-no
              width 13px
              margin-right 2px
              background url('../../common/image/icon/model-look-icos.png') no-repeat
              background-size 13px 13px
              height 13px
              display inline-block
          .focus-number
            background #fff
            border 1px solid #d1d2d3
            border-radius 0px 3px 3px 0px
            padding 4px 11px
            border-left none
            height 20px
            line-height 20px
            box-sizing content-box
    .nav-list
      width 100%
      position relative
      margin 0 auto
      max-width 1162px
      display flex
      .main-nav-list
        height 100%
        .main-nav-list-container
          display flex
          height 100%
          align-items flex-end
          .icon
            display inline-block
            width 24px
            height 50px
          .icon-structure
            background url(../../common/image/icon-project/icon-structure-no.png) no-repeat center
            background-size 16px 14px
          .icon-data-set
            background url(../../common/image/icon-project/data-set--left-ico-no.png) no-repeat center
            background-size 16px 16px
          li:first-child
            margin-left 0
          .nav-item
            padding 0 10px
            font-weight 600
            font-size 14px
            display flex
            color #666
            justify-content center
            align-items center
            cursor pointer
            position relative
            margin 0
            >a
              color #666
              text-decoration none
              cursor pointer
            >a:before
              content ''
              position absolute
              top 0
              right 0
              bottom 0
              left 0
          .link-item
            padding 0 30px
            height 44px
        .nav-item.active
          font-weight bold
          color #2d323b
          background #fff
          box-shadow 0 14px 0 -10px #f3c922 inset
          border-radius 5px 5px 0 0
          .icon-structure
            background url(../../common/image/icon-project/icon-structure.png) no-repeat center
            background-size 16px 14px
          .icon-data-set
            background url(../../common/image/icon-project/data-set--left-ico.png) no-repeat center
            background-size 16px 16px
    .nav-left
      width 70%
    .nav-right
      width 40%
      display flex
      align-items center
      justify-content flex-end
  .content
    width 100%
    position relative
    margin 0 auto
    max-width 1162px
    padding 0
    .content-box
      background #ffffff
      border-radius 5px
      .profile-box
        .desc
          color #666666
          font-size initial
          font initial
          line-height initial
          >p
            height 40px
        .imgages
          padding 20px 0
          .title
            font-size 14px
            margin-bottom 20px
            color #333
            font-weight bold
          .pic-box
            position relative
            width 100%
            height 100%
            background #f5f7fa
          .figure_pic
            position absolute
            top 0
            bottom 0
            left 0
            right 0
            margin auto
            max-width 100%
            max-height 100%
      .filepath-header
        line-height 20px
        display flex
        justify-content space-between
        align-items center
        padding 20px 0
        .filepath-header-left
          .file-icon
            width 16px
            height 16px
            display inline-block
          .breadcrumb
            display inline-block
            font-weight 600
            font-size 14px
            color #2D323B
            padding-left 10px
            .file-path
              cursor pointer
              &:hover
                color $color-lan
            .not-allowed-dir
              color #82848a
              cursor not-allowed
              &:hover
                color #82848a
        .filepath-header-right
          .el-button
            background #F8F9FA
            border 1px solid #D9D9D9
          .btn-upload
            border-right none
            border-radius unset
          .tip-txt
            font-size 12px
            color #666
      .file-table
        .table-link
          cursor pointer
          >span
            &:hover
              color: $color-lan
        .disabled
          cursor not-allowed
        .file-icon
          model(16px,16px,0 11px 0 0)
          background-image url('../../common/image/icon/file.png')
          background-size 16px 16px
          display inline-block
          vertical-align middle
        .folder-icon
          model(16px,16px,0 11px 0 0)
          background-image url('../../common/image/icon/folder.png')
          background-size 16px 16px
          display inline-block
          vertical-align middle
        .file-pic
          model(16px,16px,0 11px 0 0)
          background-image url('../../common/image/icon/file-image.png')
          background-size 16px 16px
          display inline-block
          vertical-align middle
      .data-list
        display flex
        flex-wrap wrap
        align-items stretch
        margin-left -15px
        margin-right -15px
        .item
          width 367px
          display inline-block
          border-radius 5px
          background #fff
          box-sizing border-box
          transition all .2s linear
          position relative
          margin 0 15px 29px
          .tag
            position relative
            display inline-block
            width 100%
            transition border-color 0.3s
            text-align left
            padding 16px 25px
            cursor pointer
            transition all 0.3s ease-in-out
            bottom 0
            box-sizing border-box
            border 1px solid #E8E8E8
            border-radius 8px
            .tag-footer
              font-size 14px
              color #2D323B
              display flex
              align-items center
              justify-content space-between
              padding-top 24px
              .tag-footer-category
                font-size 14px
                color #666666
                .algorithm-icon
                  width 15px
                  height 12px
                  display inline-block
                  margin-right 7px
                >span
                  margin-left 13px
            &:hover
              box-shadow 0 0 10px 0 rgba(74,74,74,0.15)
            .title
              font-weight 600
              font-size 18px
              color #24292E
              line-height 37px
              overflow hidden
              text-overflow ellipsis
              white-space nowrap
            .desc
              height 40px
              overflow hidden
              display -webkit-box
              -webkit-line-clamp 2
              line-height 20px
              text-overflow ellipsis
              -webkit-box-orient vertical
              font-size 14px
              color #8E9091
              letter-spacing 0
              overflow hidden
              text-overflow ellipsis
              display -webkit-box
              /*! autoprefixer: off */
              -webkit-box-orient vertical
              /* autoprefixer: on */
              -webkit-line-clamp 2
              word-break break-all
              word-wrap break-word
            .tag-icon
              width 12px
              height 12px
              display inline-block
              margin-right 7px
      .project-list
        display flex
        flex-wrap wrap
        justify-content space-between
        .item
          width 560px
          border-radius 5px
          background #ffffff
          transition all .2s linear
          position relative
          margin-bottom 34px
          padding 24px 20px
          border 1px solid #e8e8e8
          cursor pointer
          &:hover
            box-shadow 0 0 10px 0 rgba(74,74,74,0.15)
          .image
            display inline-block
            width 108px
            height 108px
            vertical-align top
          .tag
            position relative
            display inline-block
            width 410px
            padding-left 28px
            .title
              width 100%
              height 22px
              margin-bottom 8px
              .name-pro
                display inline-block
                width 70%
                height 22px
                line-height 22px
                text-align left
                font-size 18px
                color #2296F3
                font-weight 600
                overflow hidden
                text-overflow ellipsis
                white-space nowrap
              .info
                display inline-block
                width 30%
                height 22px
                line-height 22px
                text-align right
                font-size 12px
                color #8D9091
                overflow hidden
                text-overflow ellipsis
                white-space nowrap
            .tag-footer
              margin-top 18px
              font-size 0
              .count
                display inline-block
                width 22%
                height 20px
                line-height 20px
                font-size 14px
                color #2D323B
                .tag-icon
                  display inline-block
                  width 12px
                  height 20px
                  margin-right 6px
                  background url(../../common/image/icon-project/icon-copy.png) no-repeat center
                  background-size 12px 17px
                  vertical-align top
              .category
                display inline-block
                width 78%
                height 20px
                font-size 0
                text-align right
                .list
                  position relative
                  display inline-block
                  height 20px
                  line-height 20px
                  padding-left 16px
                  font-size 14px
                  color #666666
                  &:after
                    content ''
                    display block
                    width 6px
                    height 6px
                    background #B1B5B7
                    border-radius 50%
                    position absolute
                    top 7px
                    left 7px
            .desc
              height 40px
              overflow hidden
              display -webkit-box
              -webkit-line-clamp 2
              line-height 20px
              text-overflow ellipsis
              -webkit-box-orient vertical
              font-size 14px
              color #8E9091
              letter-spacing 0
              overflow hidden
              text-overflow ellipsis
              display -webkit-box
              /*! autoprefixer: off */
              -webkit-box-orient vertical
              /* autoprefixer: on */
              -webkit-line-clamp 2
              word-break break-all
              word-wrap break-word
      .markdown-box
        border 1px solid #ebeef5
        margin-top 20px
        .header-markdown
          display flex
          justify-content space-between
          font-size 12px
          border-bottom 1px solid #ebeef5
          padding 10px 20px
          .header-left
            display flex
            align-items center
            height 20px
            line-height 20px
            >img
              width 16px
              height 16px
              margin-right 13px
          .header-right
            display flex
            align-items center
            height 20px
            line-height 20px
            cursor pointer
            >i
              margin-right 5px
            .icon-save
              display inline-block
              width 12px
              height 12px
              margin-right 3px
              background url('../../common/image/icon/save.png')
              background-size 12px 12px
            .icon-edit
              display inline-block
              margin-left 10px
              width 12px
              height 12px
              margin-right 3px
              background url('../../common/image/icon/edit.png')
              background-size 12px 12px
            .icon-cancle
              display inline-block
              margin-left 10px
              width 12px
              height 12px
              margin-right 3px
              background url('../../common/image/icon/edit-cancle.png')
              background-size 12px 12px
        .markdown-content
          padding 20px
  .open-text
    line-height 30px
    height 30px
    color #8D9091
  .open-checkbox
    margin 35px 0 6px
  .dialog-footer
    display flex
    justify-content flex-end
  .loadmore
    display flex
    align-items center
    justify-content center
    height 50px
    .loadmore-box
      height 40px
      line-height 40px
      font-size 16px
      width 50%
      display flex
      align-items center
      justify-content center
      background #f5f7fa
      cursor pointer
  .no-data
    display flex
    align-items center
    justify-content center
  .dialog-left-text
    text-align right
    float left
    font-size 14px
    color #606266
    line-height 40px
    padding 0 12px 0 0
    box-sizing border-box
  .friendsBox
    margin 20px 0
    box-sizing border-box
    .friendsBox-item
      display inline-block
      .item-checkbox
        display flex
        align-items center
        float left
        margin 10px 20px 10px 0
      .friend-avatar
        width 30px
        height 30px
        margin-right 5px
        border-radius 50%
      .el-checkbox__label
        display flex
        align-items center
  .table-head-th
    background #F1F8FF
    font-weight 600
    font-size 14px
    color #4A4A4A
  .upload-location
    display none
  .editor-container
    margin-top 0px
    .editor-header
      height 40px
      line-height 40px
      background-color #f8f8f8
      border 1px solid #ddd
      border-radius 5px 5px 0 0
      font-size 14px
      border-bottom none
      font-weight 500
      padding 0 10px
      >span
        padding 0 10px
      .action
        // padding-right 10px
        color #4285f4
        cursor pointer
        font-size 12px
      .action-right
        display flex
        align-items center
      .icon-cancle
        display inline-block
        margin-left 10px
        width 12px
        height 12px
        margin-right 3px
        background url('../../common/image/icon/edit-cancle.png')
        background-size 12px 12px
      .icon-save
        display inline-block
        width 12px
        height 12px
        margin-right 3px
        background url('../../common/image/icon/save.png')
        background-size 12px 12px
      span
        font-size 12px
        color #8F9498
        letter-spacing 0
        >i
          padding-right 3px
        &.action-span-hover:hover
          color #5e6061
    .code-eidtor
      margin-bottom 10px
      line-height 24px
    .md-content
      padding 20px
      width 100%
      border 1px solid #ddd
  .picPreview
    display flex
    justify-content center
    box-shadow none
    img
      width 90%
      height 90%
  .tui-editor-defaultUI
    width 100%
.open-dataset-dialog
  .open-dataset-header-btn
    padding 9px 35px
    font-size 14px
    color #2D323B
    &:hover
      background #FFFFFF
  .active-user-type
    background #2E94F9
    color #FFFFFF!important
    &:hover
      background #2E94F9!important
  .open-dataset-footer-btn
    font-size 14px
    color #2D323B
    padding 6px 20px
    line-height 20px
    border 1px solid #DBDFE6
    border-radius 3px
    background #ffffff
    margin-right 17px
    cursor pointer
    outline none
  .open-dataset-footer-active
    background #2E94F9
    color #ffffff
    margin 0
  .el-dialog__header
    padding 23px 49px 10px
  .el-dialog__body
    padding 13px 49px
  .el-dialog__footer
    padding 29px 49px
  .user-search
    display flex
    justify-content space-between
    padding 36px 0 0
    .user-search-input
      display inline-block
      width 80%
    .user-search-btn
      background #F4F7F8
      font-size 14px
      color #2D323B
      padding 10px 30px
      border none
      cursor pointer
      &:hover
        background #F4F7F8
        color #2D323B
  .user-search-result
    display flex
    justify-content space-between
    align-items center
    width 80%
    border 1px solid #dcdfe6
    padding 10px 15px
    border-top none
    .user-search-result-left
      display flex
      align-items center
      .user-search-result-header-img
        width 20px
        height 20px
        font-size 0
        margin-right 7px
        border-radius 50% 50%
      .user-search-result-name
        color #2d323b
        margin-right 9px
        font-weight 600
      .user-search-result-email
        color #666
      .user-search-result-text
        max-width 200px
        height 20px
        line-height 20px
        word-break break-all
        word-wrap break-word
        overflow hidden
        text-overflow ellipsis
        display -webkit-box
        /*! autoprefixer: off */
        -webkit-box-orient vertical
        /* autoprefixer: on */
        -webkit-line-clamp 1
    .user-search-result-right
      .user-search-result-add-img
        width 14px
        height 14px
        margin-top 2px
        font-size 0
        cursor pointer
  .user-selected
    .user-selected-list-box
      overflow auto
    .user-selected-list
      display flex
      justify-content space-between
      align-items center
      padding 20px 0
      flex-wrap wrap
      max-height 306px
      .user-selected-item
        width 97%
        display flex
        justify-content space-between
        align-items center
        padding 12px 0
        .user-selected-item-left
          display flex
          align-items center
          .user-selected-item-header-img
            width 32px
            height 32px
            margin-right 12px
            border-radius 50% 50%
          .user-selected-item-name
            display block
            font-size 14px
            color #2E94F9
            font-weight 600
            padding-bottom 5px
          .user-selected-item-email
            color #666
        .user-selected-item-right
          .user-selected-item-add-img
            width 11px
            height 11px
            font-size 0
            cursor pointer
</style>
